<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clean Preview</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            overflow: hidden;
            font-family: sans-serif;
        }

        .container {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .canvas-wrapper {
            position: relative;
            width: 100%;
            max-width: calc((100vh - 40px) * 16 / 9);
            aspect-ratio: 16 / 9;
            background-color: #000;
            overflow: hidden;
        }

        #background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        .ui-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        #start-game-btn {
            position: absolute;
            left: 32.62%;
            top: 68%;
            width: 30.36%;
            height: 10%;
            z-index: 19;
            /* 调高z-index，仅次于弹窗 */
            cursor: pointer;
            /* 确保鼠标悬停时显示手型光标 */
            /* 添加过渡效果 */
            transition: transform 0.2s ease;
            /* 添加背景色以便于调试时看到点击区域 */
            background: rgba(255, 255, 255, 0.1);
        }

        /* 添加悬停效果 */
        #start-game-btn:hover {
            transform: scale(1.05);
            /* 悬停时添加更明显的背景色 */
            background: rgba(255, 255, 255, 0.2);
        }

        #popup-window {
            position: absolute;
            left: 11.23%;
            top: 20.14%;
            width: 74.00%;
            height: 35.55%;
            z-index: 20;
            /* 提高z-index确保弹窗在最上层 */
            cursor: pointer;
            /* 添加过渡效果使显示更平滑 */
            transition: opacity 0.3s ease, transform 0.3s ease;
            opacity: 0;
            transform: scale(0.9);
        }

        .popup-visible {
            opacity: 1 !important;
            transform: scale(1) !important;
            pointer-events: auto !important;
            /* 确保弹窗可见时可以接收事件 */
        }

        .popup-hidden {
            opacity: 0 !important;
            transform: scale(0.9) !important;
            pointer-events: none !important;
            /* 隐藏时禁用事件 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="canvas-wrapper">
            <video id="background-video" autoplay muted loop playsinline>
                <source src="assets/背景动画.mp4" type="video/mp4">
                您的浏览器不支持视频播放
            </video>
            <div class="ui-overlay">
                <div style="position: absolute; left: 2%; top: 2%; width: 25%; height: 26%; z-index: 10">
                    <img src="assets/主logo.png" style="width: 100%; height: auto;" alt="Layout Image">
                </div>
                <div style="position: absolute; left: 31.35%; top: 47.07%; width: 32.67%; height: 9.18%; z-index: 10">
                    <img src="assets/区服.png" style="width: 100%; height: auto;" alt="Layout Image">
                </div>
                <div style="position: absolute; left: 1.95%; top: 76.97%; width: 91.42%; height: 19.34%; z-index: 10">
                    <img src="assets/文字提示.PNG" style="width: 100%; height: auto;" alt="Layout Image">
                </div>
                <div id="start-game-btn">
                    <img src="assets/开始游戏.png" style="width: 100%; height: auto;" alt="开始游戏">
                </div>
                <div style="position: absolute; left: 86.92%; top: 2.65%; width: 12.74%; height: auto; z-index: 10"><img
                        src="assets/扫码修复.PNG" style="width: 100%; height: auto;" alt="Layout Image"></div>
                <div style="position: absolute; left: 32.72%; top: 67.43%; width: 33.35%; height: 10.93%; z-index: 10">
                    <img src="assets/同意.png" style="width: 100%; height: auto;" alt="Layout Image">
                </div>
                <div style="position: absolute; left: 89.29%; top: 69.37%; width: 4.29%; height: 20.22%; z-index: 10">
                    <img src="assets/适龄提示.PNG" style="width: 100%; height: auto;" alt="Layout Image">
                </div>
                <div id="popup-window" class="popup-hidden">
                    <img src="assets/弹窗新.png" style="width: 100%; height: auto;" alt="弹窗">
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const startGameBtn = document.getElementById('start-game-btn');
            const popupWindow = document.getElementById('popup-window');

            // 确保元素存在再添加事件监听器
            if (startGameBtn && popupWindow) {
                // 添加图片加载完成检查
                const startGameImg = startGameBtn.querySelector('img');
                if (startGameImg) {
                    startGameImg.addEventListener('load', function () {
                        console.log('开始游戏图片加载完成');
                    });
                }

                const popupImg = popupWindow.querySelector('img');
                if (popupImg) {
                    popupImg.addEventListener('load', function () {
                        console.log('弹窗图片加载完成');
                    });
                }

                // 点击"开始游戏"按钮显示弹窗
                startGameBtn.addEventListener('click', function (event) {
                    console.log('点击了开始游戏按钮');
                    // 阻止事件冒泡，避免立即触发关闭
                    event.stopPropagation();
                    popupWindow.classList.remove('popup-hidden');
                    popupWindow.classList.add('popup-visible');
                });

                // 点击弹窗隐藏它
                popupWindow.addEventListener('click', function (event) {
                    console.log('点击了弹窗');
                    event.stopPropagation();
                    popupWindow.classList.remove('popup-visible');
                    popupWindow.classList.add('popup-hidden');
                });
            } else {
                console.error('未找到开始游戏按钮或弹窗元素');
            }

            // 点击其他地方也可以关闭弹窗
            document.body.addEventListener('click', function (event) {
                if (popupWindow &&
                    popupWindow.classList.contains('popup-visible') &&
                    !popupWindow.contains(event.target) &&
                    startGameBtn !== event.target &&
                    !startGameBtn.contains(event.target)) {
                    console.log('点击了其他区域，关闭弹窗');
                    popupWindow.classList.remove('popup-visible');
                    popupWindow.classList.add('popup-hidden');
                }
            });
        });
    </script>
</body>

</html>